<template>
    <div>
        <el-input v-model="findInfo" placeholder="请输入想查询的景点" style="width: 200px;margin: 10px 0;"></el-input><el-button
            style="margin:0 0 0 10px;" @click="findUser()">点击搜索</el-button>
        <el-table :data="usersList" style="width: 100%">
            <el-table-column label="用户名称" prop="name" fixed>
            </el-table-column>
            <el-table-column label="账号" prop="user_account" fixed>
            </el-table-column>
            <el-table-column label="密码" prop="user_password">
            </el-table-column>
            <el-table-column label="性别" prop="gender">
            </el-table-column>
            <el-table-column label="年龄" prop="age">
            </el-table-column>
            <el-table-column label="电话" prop="user_phone">
            </el-table-column>
            <el-table-column label="住址" prop="user_site">
            </el-table-column>
            <el-table-column align="right" width="150">
                <template slot-scope="scope">
                    <el-button size="mini" @click="handleEdit(scope.row)">编辑</el-button>
                    <el-button size="mini" type="danger" @click="handleDelete(scope.row.user_account)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <el-pagination style="width:50%;margin: 20px auto 0;" background @size-change="handleSizeChange"
            @current-change="handleCurrentChange" :current-page="pageIndex" :page-sizes="[10, 20, 50, 100]"
            :page-size="pageSize" layout=" prev, pager, next, jumper,total, sizes" :total="total">
        </el-pagination>



        <el-dialog title="用户信息修改" :visible.sync="dialogFormVisible" width="25%">
            <el-form :model="form" :rules="rules" ref="ruleForm">
                <el-form-item label="姓名" :label-width="formLabelWidth" prop="name">
                    <el-input v-model="form.name" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="密码" :label-width="formLabelWidth" prop="user_password">
                    <el-input v-model="form.user_password" autocomplete="off" placeholder="密码"></el-input>
                </el-form-item>
                <el-form-item label="性别" :label-width="formLabelWidth" prop="gender">
                    <el-select v-model="form.gender" placeholder="请选择性别" style="text-align: left;">
                        <el-option label="男" value="男"></el-option>
                        <el-option label="女" value="女"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="年龄" :label-width="formLabelWidth" prop="age">
                    <el-input v-model="form.age" autocomplete="off" placeholder="年龄"></el-input>
                </el-form-item>
                <el-form-item label="电话" :label-width="formLabelWidth" prop="user_phone">
                    <el-input v-model="form.user_phone" autocomplete="off" placeholder="电话"></el-input>
                </el-form-item>
                <el-form-item label="地址" :label-width="formLabelWidth" prop="user_site">
                    <el-input v-model="form.user_site" autocomplete="off" placeholder="地址"></el-input>
                </el-form-item>
                <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
                <el-button @click="resetForm('ruleForm')">重置</el-button>
            </el-form>
        </el-dialog>
    </div>
</template>

<script>
import api from '@/api'
export default {
    // 生命周期钩子函数 一个页面或者项目的从生到死的过程会有这个函数进行检测
    mounted() {  // 表示页面元素挂载完毕
        //   console.log(1111,api);
        this.getUsers();
    },
    data() {
        //  正则表达式
        var phoneRegex = (rule, value, callback) => {
            let phoneRegex = /^1[356789][0-9]{9}$/;
            if (phoneRegex.test(value)) {
                callback();
            } else {
                callback(new Error('请输入正确的电话号码'));

            }
        };
        var userNumberRegex = (rule, value, callback) => {
            let userNumberRegex = /^\d{8,12}$/;
            if (userNumberRegex.test(value)) {
                callback();
            } else {
                callback(new Error('请输入正确的账号'));

            }
        };

        return {
            pageIndex: 1,
            pageSize: 10,
            total: 10,
            usersList: [],
            findInfo: '',
            dialogFormVisible: false,
            form: {
                name: "",
                user_account: "",
                user_password: "",
                gender: "",
                age: "",
                user_phone: "",
                user_site: "",
            },
            rules: {

                user_password: [
                    { required: true, message: '请输入密码', trigger: 'blur' },
                ],
                name: [
                    { required: true, message: '请输入姓名', trigger: 'blur' },
                    { min: 2, max: 5, message: '长度在 2 到 5 个字符', trigger: 'blur' }
                ],
                age: [
                    { required: true, message: '请输入年龄', trigger: 'blur' },
                ],
                user_phone: [
                    { required: true, message: '请输入电话号码', trigger: 'blur' },
                    { min: 11, max: 11, message: '长度是 11 字符', trigger: 'blur' },
                    { validator: phoneRegex, trigger: 'blur' }
                ],
                gender: [
                    { required: true, message: '请选择性别', trigger: 'blur' },
                ],
            },
            formLabelWidth: '80px'
        }
    },
    methods: {
        async getUsers() {
            let res = await api.getUsers({ pageIndex: this.pageIndex, pageSize: this.pageSize })
            if (res?.code == 200) {
                this.usersList = res.data;
                this.total = res.total
            } else {
                this.usersList = []
            }
        },
        handleEdit(userInfo) {
            this.dialogFormVisible = true
            this.form = { ...userInfo }
        },
        async handleDelete(user_account) {
            let res = await api.delUsers({ user_account });
            if (res?.code == 200) {
                this.$message({
                    message: res.message,
                    type: 'success'
                });
                this.getUsers();
            } else {
                this.$message.error(res.message);
            }
        },
        async handleOk() {
            this.dialogFormVisible = false;
            let res = await api.updateUsers({ ...this.form })
            if (res?.code == 200) {
                this.$message({
                    message: res.message,
                    type: 'success'
                });
                this.getUsers();
            } else {
                this.$message.error(res.message);
            }
        },
        handleSizeChange(val) {
            this.pageSize = val;
            this.getUsers()
        },
        handleCurrentChange(val) {
            this.pageIndex = val;
            this.getUsers()
        },
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.handleOk();
                } else {
                    return false;
                }
            });
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
        },
        async findUser() {
            if (this.findInfo === '') {
                this.getUsers()
            } else {
                let res = await api.getUsers({ pageIndex: this.pageIndex, pageSize: this.pageSize })
                this.usersList = []
                if (res?.code == 200) {
                    for (let i = 0; i < res.data.length; i++) {
                        if (this.findInfo === res.data[i].user_phone || this.findInfo === res.data[i].name || this.findInfo === res.data[i].user_account) {
                            this.usersList.push(res.data[i])
                        }
                    }
                    this.total = res.total
                } else {
                    this.usersList = []
                }
            }
        }
    },
}
</script>

<style lang="scss" scoped></style>